<template>
  <div>
    <!-- 倒序 -->
    <div class='order_box' v-if="catalogList && catalogList.length > 0">
      <div class='order_main' @click='changeOrder'>
        {{orderText}}<img src="@/assets/courseDetails/order.png" class='order_icon'>
      </div>
    </div>
    <!-- 资源目录 -->
    <div class='catalog_list' v-for="item in catalogList" @click='resourceDet(item.id,item.types,messageCode)' :key="item.id">
      <div class='catalog_name'>
        <div :class="catalogId == item.id?'play_style': item.messageCode ? ' lock_style':''" class="catalog_text">
          {{item.name}}
        </div>
        <img src='@/assets/courseDetails/lock.png' class='catalog_play' v-if="item.messageCode">
        <img src='@/assets/courseDetails/stop.png' class='catalog_play' v-else-if="!item.messageCode && catalogId == item.id">
        <img src='@/assets/courseDetails/play.png' class='catalog_play' v-else>
      </div>
      <div class='catalog_content'>
        <span class='catalog_timelength'>{{item.timeLength}}</span>
        <span class='catalog_time'>{{item.strCreateTime}}</span>
        <img src='@/assets/index/browse.png' class='catalog_browse'>
        <span>{{item.clickNum}}次学习</span>
        <span class='catalog_click' v-if="!item.messageCode && item.isPlay == 1">已播放{{item.schedule}}%</span>
        <div class='catalog_free' v-if="messageCode != null && item.price == 0">免费</div>
      </div>
    </div>
    <!-- 暂无 -->
    <div v-if="!catalogList || catalogList.length == 0" class="review_nullBox">
      <img src='@/assets/resourceDetails/review.png' class='review_nullIcon'>
      <div class="review_nullText">暂无数据</div>
    </div>
  </div>
</template>

<script>
export default {
  name:'',
  props:{
    messageCode:{
      type: Number(String),
      default: ''
    },
    catalogList:{},
    catalogId:{
      type: String,
      default: ''
    }
  },
  data() {
    return {
      orderText: '倒序',
    }
  },
  methods: {
    changeOrder() {//更改排序
      if (this.orderText == '正序'){
        this.orderText = '倒序'
        this.$emit("changeOrder",'sort asc')
      } else{
        this.orderText = '正序'
        this.$emit("changeOrder",'sort desc')
      }
    },
    resourceDet(id,types,code) {
      if (types == '3') {//课程详情
        localStorage.setItem("courseId",id)
        if(this.$route.name != "courseDet"){
          this.$router.push({name:'courseDet'})
        } else{
          window.location.ad() //重新加载，更换了资源id
        }
      }
      if (types == '4') {//视频详情
        localStorage.setItem("videoId",id)
        if(this.$route.name != "videoDet"){
          this.$router.push({name:'videoDet',query:{code:code}})
        } else{
          window.location.reload() //重新加载，更换了资源id
        }
      }
      if (types == '5') {//音频详情
        localStorage.setItem("audioId",id)
        if(this.$route.name != "audioDet"){
          this.$router.push({name:'audioDet',query:{code:code}})
        } else{
          window.location.reload() //重新加载，更换了资源id
        }
      }
    }
  }
}
</script>


<style scoped>
/* 目录 */
.order_box{
  margin: 0.24rem 0 0.1rem;
  overflow: hidden;
}
.order_main{
  height: 0.4rem;
  line-height: 0.4rem;
  padding: 0 0.1rem;
  float: right;
  background: #F3F3F3;
  border-radius:0.06rem;
  margin-right: 0.24rem;
  color: #666666;
  font-size: 12px;
}
.order_icon{
  height: 0.24rem;
  width: 0.2rem;
  margin-left: 0.11rem
}
.catalog_list{
  padding: 0.4rem 0 0.3rem;
  border-bottom: solid 1px #E6EAF2;
}
.catalog_name{
  font-size:15px;
  font-weight:bold;
  color:#222222;
  overflow: hidden;
  margin-bottom: 0.3rem;
}
.catalog_text{
  width: 80%;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
  text-overflow:ellipsis;
  display: -webkit-box;
  float: left;
}
.catalog_play{
  float: right;
  height: 0.4rem;
  width: 0.4rem;
}
.lock_style{
  color: #878C97;
}
.play_style{
  color: #316AD8;
}
.catalog_content{
  color: #9C9D9C;
  font-size: 12px;

  clear: both;
}
.catalog_timelength{
  margin-right: 0.34;
}
.catalog_time{
  margin-right: 0.34rem;
}
.catalog_browse{
  height: 0.22rem;
  width: 0.22rem;
  margin-right: 0.11rem;
}
.catalog_click{
  margin-left: 0.34rem;
  color: #F5861A;
}
.catalog_free{
  float: right;
  color: #04B45F;
}
/* 暂无推荐 */
.review_nullBox{
  text-align: center;
}
.review_nullIcon{
  height: 2.52rem;
  width: 2.82rem;
  margin: 0.4rem 31%;
}
.review_nullText{
  color: #BDC2CB;
  font-weight: 500;
  margin-bottom: 0.4rem;
}
</style>
